<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=750,maximum-scale=1,user-scalable=no">
    <title>数字尾巴 | 分享美好数字生活</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3027260_z5t4fxs0js.css">
    <link rel="stylesheet" href="./css/clearSure.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/comment.css">
    <meta name="referrer" content="no-referrer">
</head>

<body>
    <div class="content">
        <div class="nav_bg">
            <header>
                <div class="logo_img">
                    <img src=""
                        alt="">
                </div>
                <a href="#">
                    下载 APP
                </a>
                <div class="search">
                    <i class="iconfont icon-sousuoleimu"></i>
                </div>
            </header>
        </div>
        <div class="commentIndex">
            <ul>
                <li><img src="https://s1.dgtle.com/dgtle_img/wap/search_phone_icon@2x.png" alt=""></li>
                <li><img src="https://s1.dgtle.com/dgtle_img/wap/rating_list_icon@2x.png" alt=""></li>
                <li><img src="https://s1.dgtle.com/dgtle_img/wap/guessyoulike_icon@2x.png" alt=""></li>
            </ul>
        </div>
        <div class="NewArrival">
            <div class="NewArrival_title">
                <p>最新上市<span>更多<i class="iconfont icon-right"></i></span></p>
            </div>
            <div class="more_goods">
                <div class="swiper">
                    <div class="swiper-wrapper  newPhone">
                    </div>
                </div>
            </div>
        </div>
        <div class="NewArrival">
            <div class="NewArrival_title">
                <p>时下热门<span>更多<i class="iconfont icon-right"></i></span></p>
            </div>
            <div class="more_goods">
                <div class="swiper">
                    <div class="swiper-wrapper hotphone">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="user_publish">
        <div class="publish_title">
            <p>推荐</p>
        </div>
        <div class="cont">
            <div class="publish_lists">
                <div class="haveImgBox">
                    <div class="img">
                        <img src="https://s1.dgtle.com/dgtle_img/review/2021/11/13/6897d202111131954365431_1800_500.jpg?imageView2/2/w/600/q/100/format/jpg" alt="">
                    </div>
                    <div class="publish_content">
                        <div class="star">
                            <ul>
                                <li><img src="./img/star.png" alt=""></li>
                                <li><img src="./img/star.png" alt=""></li>
                                <li><img src="./img/star.png" alt=""></li>
                                <li><img src="./img/star.png" alt=""></li>
                                <li><img src="./img/star.png" alt=""></li>
                            </ul>
                        </div>
                        <div class="haveImgBox-content">
                            <p>续航，中上吧，但在3000毫安里绝对是顶级的。手感偏重。滑动流畅。亮度高。拍了八张图，调了八个色，哈哈哈哈哈哈哈哈</p>
                        </div>
                        <div class="product_name">iPhone 13 Pro</div>
                        <div class="haveImgBox_bottom">
                            <div class="haveImgBox-user-left">
                                <div class="user_img">
                                    <img src="https://s1.dgtle.com/dgtle_img/user/2019/11/16/5e7ce201911161524262419.jpeg?imageView2/2/w/100/q/100/format/jpg" alt="">
                                </div>
                                <p class="user_name">何～宝～荣</p>
                            </div>
                            <div class="haveImgBox-user-rig">
                                <i class="iconfont icon-home_ico_like"></i><span>44</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="publish_lists_rig"></div>
        </div>
    </div>
    </div>
    <div class="switch">
        <div class="header_search">
            <div class="search_ipt">
                <i class="iconfont icon-search-copy"></i>
                <input type="text" placeholder="iPhone X">
            </div>
            <div class="header_close">
                <i class="iconfont icon-error"></i>
            </div>
        </div>
        <ul class="header-modules">
            <li class="header-module">
                <a href="./comment.html">
                    <img src="./img/comment.png" alt="">
                    <p>点评</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./article.html">
                    <img src="./img/article.png" alt="">
                    <p>文章</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./news.html">
                    <img src="./img/news.png" alt="">
                    <p>鲸闻</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./evaluating.html">
                    <img src="./img/test.png" alt="">
                    <p>众测</p>
                </a>
            </li>
        </ul>
        <ul class="header-modules">
            <li class="header-module">
                <a href="./activity.html">
                    <img src="./img/activity.png" alt="">
                    <p>活动</p>
                </a>
            </li>
            <li class="header-module">
                <a href="./aside.html">
                    <img src="./img/lie.png" alt="">
                    <p>闲置</p>
                </a>
            </li>
            <li class="header-module">
                <a href="">
                    <img src="./img/recycling.png" alt="">
                    <p>手机回收</p>
                </a>
            </li>
            <li class="header-module">
                <img src="" alt="">
                <p></p>
            </li>
        </ul>
        <div class="line"></div>
        <div class="header_login">
            <a href="">登录</a>
        </div>
    </div>
    <div class="app">
        <div class="openInApp">APP内打开</div>
    </div>
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/font-size.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="baseurl.js"></script>
    <script>
        // 请求数据
        window.onload = () => {
            let content = document.querySelector('.publish_lists')
            let contentr = document.querySelector('.publish_lists_rig')
            myget('/comment').then(res => {
                let str = ''
                let str1 = ''
                res.data.data.forEach((item, index) => {
                    if (index % 2 == 0) {
                        str += `
                <div class="haveImgBox">
                    <div class="img">
                        <img src="${item.img}" alt="">
                    </div>
                    <div class="publish_content">
                        <div class="star">
                            <ul>
                                <li><img src="./img/star.png" alt=""></li>
                                <li><img src="./img/star.png" alt=""></li>
                                <li><img src="./img/star.png" alt=""></li>
                                <li><img src="./img/star.png" alt=""></li>
                                <li><img src="./img/star.png" alt=""></li>
                            </ul>
                        </div>
                        <div class="haveImgBox-content">
                            <p>${item.tittle}</p>
                        </div>
                        <div class="product_name">${item.name}</div>
                        <div class="haveImgBox_bottom">
                            <div class="haveImgBox-user-left">
                                <div class="user_img">
                                    <img src="${item.user_img}" alt="">
                                </div>
                                <p class="user_name">${item.user_name}</p>
                            </div>
                            <div class="haveImgBox-user-rig">
                                <i class="iconfont icon-home_ico_like"></i><span>44</span>
                            </div>
                        </div>
                    </div>
                </div>
                        `
                    } else {
                        str1 += `
                <div class="haveImgBox">
                    <div class="img">
                        <img src="${item.img}" alt="">
                    </div>
                    <div class="publish_content">
                        <div class="star">
                            <ul>
                                <li><img src="./img/star.png" alt=""></li>
                                <li><img src="./img/star.png" alt=""></li>
                                <li><img src="./img/star.png" alt=""></li>
                                <li><img src="./img/star.png" alt=""></li>
                                <li><img src="./img/star.png" alt=""></li>
                            </ul>
                        </div>
                        <div class="haveImgBox-content">
                            <p>${item.tittle}</p>
                        </div>
                        <div class="product_name">${item.name}</div>
                        <div class="haveImgBox_bottom">
                            <div class="haveImgBox-user-left">
                                <div class="user_img">
                                    <img src="${item.user_img}" alt="">
                                </div>
                                <p class="user_name">${item.user_name}</p>
                            </div>
                            <div class="haveImgBox-user-rig">
                                <i class="iconfont icon-home_ico_like"></i><span>44</span>
                            </div>
                        </div>
                    </div>
                </div>
                        `
                    }
                })
                content.innerHTML = str
                contentr.innerHTML = str1
            }).catch(err => {
                console.log(err);
            })

            let nphone = document.querySelector('.newPhone')
            myget('/newphone').then(res => {
                let str = ''
                res.data.data.forEach((item, index) => {
                    if (index == 0) {
                        str += `
                    <div class="swiper-slide first-slide">
                        <div class="phone_goods">
                        <div class="phone_img">
                            <img src="${item.phone_img}" alt="">
                        </div>
                        <div class="phone_text">
                            <p class="phone_name">${item.phone_name}</p>
                            <p class="scroe">暂无评分</p>
                         </div>
                    </div>
                  </div>
                    `
                    } else if (index < 6) {
                        str += `
                        <div class="swiper-slide">
                            <div class="phone_goods">
                        <div class="phone_img">
                            <img src="${item.phone_img}" alt="">
                        </div>
                        <div class="phone_text">
                            <p class="phone_name">${item.phone_name}</p>
                            <p class="scroe">暂无评分</p>
                         </div>
                    </div>
                        </div>
                        `
                    }
                })

                nphone.innerHTML = str
                var swiper = new Swiper(".swiper", {
                    slidesPerView: 4,
                    spaceBetween: 20,
                    centeredSlides: false,
                });
            }).catch(err => {
                console.log(err);
            })
            let hphone = document.querySelector('.hotphone')
            myget('/hotphone').then(res => {
                let str = ''
                res.data.data.forEach((item, index) => {
                    if (index == 0) {
                        str += `
                    <div class="swiper-slide first-slide">
                        <div class="phone_goods">
                        <div class="phone_img">
                            <img src="${item.phone_img}" alt="">
                        </div>
                        <div class="phone_text">
                            <p class="phone_name">${item.phone_name}</p>
                            <p class="scroe">暂无评分</p>
                         </div>
                    </div>
                  </div>
                    `
                    } else if (index < 6) {
                        str += `
                        <div class="swiper-slide">
                            <div class="phone_goods">
                        <div class="phone_img">
                            <img src="${item.phone_img}" alt="">
                        </div>
                        <div class="phone_text">
                            <p class="phone_name">${item.phone_name}</p>
                            <p class="scroe">暂无评分</p>
                         </div>
                    </div>
                        </div>
                        `
                    }
                })
                hphone.innerHTML = str

            }).catch(err => {
                console.log(err);
            })
        }


        // 搜索切换
        $('.search').click(() => {
            $('.content').css({
                'display': ' none'
            })
            $('.switch').css({
                'display': 'block'
            })
            $('body').css({
                'background': '#fff'
            })
            $('.user_publish').css({
                'display': ' none'
            })
        })
        $('.header_close').click(() => {
            $('.content').css({
                'display': ' block'
            })
            $('.switch').css({
                'display': 'none'
            })
            $('body').css({
                'background': '#f5f5f5'
            })
        })
        document.querySelector('.content .logo_img').onclick = () => {
            location.href = 'index.html'
        }
    </script>
</body>

</html>